<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3选择器</title>
    <style>
        div[data-abc]{
            color:red;
        }
        div[data-abc=true]{
            color:blue;
        }
        div[data-abc~=false]{
            color:green;
        }
        div[data-abc|=truefalse]{
            color:yellow;
        }

        /*CSS3中新增的属性选择器*/
        div[data-name*=c]{
            color:orange;
        }
        div[data-name^=a]{
            font-size:26px;
        }
        div[data-name$=y]{
            font-weight:bold;
        }
        ul li:first-child{
            color:red;
        }
        p::first-line{
            color:blue;
        }
        p::first-letter{
            font-size:26px;
        }
        span::first-line{
            color:blue;
        }
        span::first-letter{
            font-size:26px;
        }
        .wrap1::before{
            content:'abc';
        }
        .wrap2::after{
            content:'888';
        }
        :root{
            font-size:48px;
        }
        ul li:not(:first-child):not(:last-child):not(:nth-child(3)){
            font-size:18px;
        }
        p:empty{
            width:100px;
            height:30px;
            border:solid 1px #ff0000;
        }
        #div1{
            margin-top:300px;
            width:50vw;
            height:50vh;
            background:red;
        }
        #div1:target{
            background:blue;
            color:#fff;
            transition:all 2s;
        }
        ul:nth-child(1){
            background:red;
        }
    </style>
</head>
<body>
    <div data-abc="">[attr]</div>
    <div data-abc="true">[attr]</div>
    <div data-abc="true false data">[attr]</div>
    <div data-abc="truefalse-data">[attr]</div>
    <div data-name="xcy">[attr]</div>
    <div data-name="abc-xcy">[attr]</div>
    <ul>
        <li>项目1</li>
        <li>项目2</li>
        <li>项目3</li>
        <li>项目4</li>
        <li class="l5">项目5</li>
        <li>项目6</li>
        <li>项目7</li>
        <li>项目8</li>
        <li>项目9</li>
        <li>项目10</li>
    </ul>
    <p>
        11111111111
        <br>
        2222222
    </p>
    <span>444444<br>333</span>
    <div class="wrap1">before</div>
    <div class="wrap2">after</div>
    <p></p>
    <a href="#div1">跳转</a>
    <div id="div1">aaaaa</div>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
        <li>列表6</li>
    </ul>
</body>
</html>
